import {Button, Form, Input, InputNumber, Select, Space, Switch} from "antd";
import {MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";
import FormItem from "antd/es/form/FormItem";
import DataEdit from "./DataEdit.tsx";

export const renderComponentType = (setter: any) => {
    switch (setter.type) {
        case 'select':
            return <Form.Item key={setter.name} label={setter.label}  name={setter.name} >
                <Select options={setter.options} mode={setter.mode || "single"}/>
            </Form.Item>
        case 'input':
            return <Form.Item key={setter.name} label={setter.label}  name={setter.name} >
                <Input placeholder={setter.placeholder || ''}/>
            </Form.Item>
        case 'addOption':
            return <div >
                <h3>{setter.label}</h3>
                <br/>
                <FormItem wrapperCol={{ span: 23 }}  >
                    <div className={'h-full'}>
                        <Form.List  name={setter.name}  key={setter.name} initialValue={setter.options} >
                            {(fields, { add, remove }) => (
                                <>
                                    {fields.map(({ key, name, ...restField }) => {
                                        return (
                                            <Space key={key} style={{ display: 'flex', marginBottom: 30, alignItems:"center" }} align="baseline" >
                                                <Form.Item
                                                    label={'label'}
                                                    {...restField}
                                                    name={[name, 'label']}
                                                    layout={'vertical'}
                                                    rules={[{ required: true, message: 'label不能·为空' }]}
                                                >
                                                    <Input placeholder="label" />
                                                </Form.Item>
                                                <Form.Item
                                                        {...restField}
                                                    label={'value'}
                                                    name={[name, 'value']}
                                                    layout={'vertical'}
                                                    rules={[{ required: true, message: 'value不能为空' }]}
                                                >
                                                    <Input placeholder="value" />
                                                </Form.Item>
                                                <MinusCircleOutlined style={{ fontSize: '16px', color: '#08c' }} className={'hover:text-red-600'} onClick={() => remove(name)} />
                                            </Space>
                                        )
                                    })}
                                    <Form.Item>
                                        <Button type="primary"  onClick={() => add({label:'',value:''})} block icon={<PlusOutlined />}>
                                            新增选项
                                        </Button>
                                    </Form.Item>
                                </>
                            )}
                        </Form.List>
                    </div>
                </FormItem>
            </div>
        case 'inputNumber':
            return <Form.Item key={setter.name} label={setter.label}  name={setter.name} >
                <InputNumber />
            </Form.Item>
        case 'switch':
            return <Form.Item key={setter.name} label={setter.label}  name={setter.name} >
                <Switch></Switch>
            </Form.Item>
        case 'EditData':
            return <div className={'w-full relative h-[400px]'}>
                <div>
                    {setter.label}
                </div>
                <br/>
                <div >
                    <Form.Item wrapperCol={{span:23}} className={'w-full h-[300px] p-0'} key={setter.name}   name={setter.name} >
                        <DataEdit />
                    </Form.Item>
                </div>
            </div>


    }


}